import React, { Component } from "react";
import Header from "../../components/Header/Header";

import { $pre } from "../../http/http";
import "./Shop.less";
import yImg from "../../assets/img/y.jpeg";
import nImg from "../../assets/img/n.jpeg";
import { Button, SwipeAction, Dialog, Toast } from "antd-mobile";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
// import { filterPrice } from "../../filters/filters";
import { actions,getList ,getAllChecked,getAllprice} from "../../store/modules/shop";
 class Shop extends Component {
componentDidMount(){
    this.props.shop.reqList()
}
  render() {
   
     let { list, allChecked, shop:{add,sub,reqList,del,changeAll,changeOne},allPrice} = this.props;
  
    return (
      <>
        <Header title="购物车"></Header>
        {list.map((item, index) => (
          <SwipeAction
            key={item.id}
            closeOnAction={false}
            closeOnTouchOutside={false}
            rightActions={[
              {
                key: "delete",
                text: "删除",
                color: "danger",
                onClick: async () => {
                  await Dialog.confirm({
                    content: "确定要删除吗？",
                    onConfirm: () => {
                  del(item.id);
                    },
                  });
                },
              },
            ]}
          >
            <div className="item">
              <img
                className="checkbox"
                onClick={() => changeOne(index)}
                src={item.checked ? yImg : nImg}
                alt=""
              />
              <img
              
                className="img"
                src={$pre + item.img}
                alt=""
              />
              <div className="right">
                <h3>name:{item.goodsname}</h3>
                <div>price:{(item.price)}</div>
                <div>
                  <Button onClick={() => sub(item.id, item.num)}>-</Button>
                  {item.num}
                  <Button onClick={() => {
                    add(item.id)
                    reqList()
                  }}>+</Button>
                </div>
              </div>
            </div>
          </SwipeAction>
        ))}

        {/* 全选总价 */}
        <div className="footer">
          <div className="allChecked" onClick={() => changeAll()}>
            <img className="checkbox" src={allChecked ? yImg : nImg} alt="" />
            全选
          </div>
          <div className="allPrice">￥{(allPrice)}</div>
          <Button>点击去结算</Button>
        </div>
      </>
    );
  }
}
const mapStateToprops = (state) => {
  return {
    list:getList(state),
    allChecked:getAllChecked(state),
    allPrice:getAllprice(state)
  };
};
const mapDispatchToprops = (dispatch) => {
  return {
    shop: bindActionCreators(actions, dispatch),
  };
};
export default connect(mapStateToprops, mapDispatchToprops)(Shop);